
<template>
  <div class="div-arr-select">
    <el-select v-if="!isChild" :style="{width:setW+'px'}" value-key="id" :multiple="isMore" :loading="loading"
     :reserve-keyword="false" :remote-method="remoteMethod" @click="handleClick" @change="change" @visible-change="viewChange" clearable
      :filterable="true"  :remote="true" @focus="focus" placeholder="请输入选择" v-model="rawData[type]"  >
        <el-option v-for="item in options" :key="item.id" :label="item[itemName]" :value="item"></el-option>
    </el-select>
    <el-select v-else :style="{width:setW+'px'}" value-key="id" :multiple="isMore" :loading="loading"  :reserve-keyword="false"
    :remote-method="remoteMethod" @click="handleClick"  @change="change" @visible-change="viewChange" clearable
     :filterable="true"  :remote="true" placeholder="请输入选择" v-model="rawData[type]" >
        <el-option v-for="item in options" :key="item.id" :label="item[isChild][itemName]" :value="item[isChild]"></el-option>
    </el-select>  
    <!-- <svg-icon  :class="[{select:isSelect,noselect:!isSelect}, 'select-icon']"  icon-class="btn_zk2" class-name="btn_zk2" />   -->
  </div> 
</template>
<script>
import * as Api from "src/api/net";
export default {
  props: {
    rawData: {
      type: Object
    },
    reqUrl: String,
    type: String,
    isMore: {
      type: Boolean,
      default: true
    },
    setW: String,
    itemName: {
      type: String,
      default: "name"
    },
    isChild: String
  },
  data() {
    return {
      options: [],
      isSelect: false,
      loading: false,
      popClass: ""
    };
  },
  watch: {},
  mounted() {
    var list = this.rawData[this.type];
    if (list && isNoEmpty(list)) {
      for (let i = 0; i < list.length; i++) {
        this.remoteMethod(this.rawData[this.type][i][this.itemName]);
      }
    }
  },
  methods: {
    focus() {
      this.options = [];
    },
    handleClick(event) {
      this.$emit("click", event);
    },
    viewChange(flag) {
      this.isSelect = flag;
      this.$emit("viewChange");
    },
    change() {
      this.$emit("selectArrChange", this.rawData[this.type]);
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        let sendData = {};
        sendData["curr_page"] = 1;
        sendData["page_size"] = 9999;
        Api.AjaxPost(Config.ajaxUrl + this.reqUrl, sendData, res => {
          if (isNoEmpty(res.data.data_list)) {
            this.loading = false;
            // this.options = res.data.data_list;
            this.options = res.data.data_list.filter(item => {
              return (
                item[this.itemName].toLowerCase().indexOf(query.toLowerCase()) >
                -1
              );
            });
          }
        });
      } else {
        this.options = [];
      }
    }
  },
  computed: {}
};
</script>

<style scoped>
.div-arr-select {
  position: relative;
}

.select-icon {
  pointer-events: none;
  position: absolute;
  right: 22px;
  top: 16%;
}

@keyframes myselect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes mynoselect {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.select {
  animation: myselect 0.5s infinite;
  animation-iteration-count: 1;
  transform: rotate(180deg);
}

.noselect {
  animation: mynoselect 0.5s infinite;
  animation-iteration-count: 1;
  transform: rotate(0deg);
}
</style>
